<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../styles/base.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../styles/font/iconfont.css"/>
    <link rel="stylesheet" href="../jqueryNicepage/css/layui.css"  media="all">
    <style>
        .body{
            background:#ddecf5;
            min-width: auto;
            max-width:300px;
            max-height:500px;
            overflow: hidden;
        }
        .seachHeader span{
            margin-top: 5px;
            float: left;
            display: inline-block;
            height:30px;
            line-height: 30px;
            font-size: 16px;

        }
        .seachHeader span:first-child{
            margin-left: 20px;
        }
        .seachHeader .inputBox{
            float:left;
            width:200px;
            height:30px;
            line-height: 30px;
            font-size: 14px;
            padding-left: 10px;
            position: relative;
        }
        .seachHeader .inputBox input{
            width:190px;
            height:30px;
            line-height: 30px;
            position: absolute;
            padding-left: 10px;
            left:0;
        }
        .searchSureBtn{
            margin-left: 30px;
            float:right;
            background-color: #eee;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            text-decoration: none;
            font-weight: 600;
            color: #333;
            position: relative;
            padding: 1px 15px;
            margin-right: 15px;
            margin-top:2px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(242,242,242)), color-stop(1, rgb(242,242,242)) );
            cursor: pointer;
            overflow: hidden;
        }
        .searchSureBtn:hover{
            color:#fff;
            background:#40E0D0;
        }
        .body .searchContainer{
            width:96%;
            margin-left: 2%;
            margin-top: 10px;
            min-width: 500px;
            max-height: 98%;
        }
        .formContent{
            height:auto;

        }
        .formContent center{
            margin-top:-10px;
        }
        .formContent center #pageBar2{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align: center;
            display:none;
        }
    </style>
</head>
<body class="body">
<div id="loading">
    <img src='../styles/img/loading.gif' />
</div>
<div class="searchContainer">
    <div class="formContent">
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/common/publicClass.js"></script>
<script src="../js/common/myAjax.js"></script>
<script src="../js/common/utils.js"></script>
<script src="../layer/layer.js" charset="utf-8"></script>
<script language="Javascript" src="../jqueryNicepage/js/layui.js"></script>
<script>
    //页面一进来进行数据请求
    toAjaxData();
    /*$(".searchSureBtn").click(*/
    function toAjaxData(){
        var params=getQueryStringByNameTwo("number")!=undefined&&getQueryStringByNameTwo("number")!=""?getQueryStringByNameTwo("number"):"";
        if(params!=""){
            var url = "/MaterialsApplication/tmGetMaterialsClassification",
                data="number="+encodeURIComponent(params);
            $("#loading").css({
                display:"block"
            });
            MaterialReverseAjax(url,data,suCallback);
            var height=document.body.clientHeight;
            var width =document.body.clientWidth;
            $("#loading img").css({
                "margin-left":width/2-25+"px",
                "margin-top":height/2-25+"px"
            })
        }else{
           // layerFn("成品编号参数为空！");
        }

    }/*)*/
    function suCallback(str){
        $("#loading").css({
            display:"none"
        });

        if(str.datalist!=undefined&& JSON.stringify(str.datalist)!="{}"){
            var dataLists=[];
            for(var v in  str.datalist){
                var objV={};
                objV.keys=v;
                objV.val=str.datalist[v];

                dataLists.push(objV)
            }
           // dataLists.sort(compareUp("createtime"));
            var heightform=$(".searchContainer").height()-20;
            $(".formContent").css({
                "max-height":heightform*0.85,
                "overflow-y":"scroll"
            });
            window.historyList1=dataLists;
            window.headers1=["序号","分类属性名称","分类属性值"]
            window.widths1=[100,200,400];
           // window.reportQuery="false";
            $(".formContent").empty().load('./newTable.html',"",function(){
                setTimeout(function(){
                    var heightform=$(".searchContainer").height()-20;

                    if($(".formContent")[0].offsetHeight>(heightform*0.85)){
                        $("#pageBar2").css("top",heightform*0.85+30)
                    }else{
                        $("#pageBar2").css("top",$(".formContent")[0].offsetHeight+80);
                    }
                    $("#pageBar2").css("display","block")

                    clearTimeout();
                },200)
            });
        }else{
            $(".formContent").empty();
            layerFn("您查询的数据不存在！");
        }
    }
    $(".formContent").scroll(function() {
        var scrolltop=$(this).scrollTop();
        if(scrolltop>0){
            $("#table2 table thead").css({
                "position":"fixed",
                "background":"#f2f2f2",
                "opacity":"1",
                "z-index": 999,
                "top":"10px"
            })
        }else{
            $("#table2 table thead").css({
                "position":""

            })
        }
        for (var i = 0; i < nameList1.length; i++) {
            var height = $("#table2 table tbody tr:first-child td").eq(i).width();
            $("#table2 table thead tr:first-child th").eq(i).css({
                "width": height+0.8

            })
        }
    })
    $(window).resize(function () { //当浏览器大小变化时
        //console.log($("#table2 table").width())
        $("#table2 table thead tr").css({
            "width":$("#table2 table").width()

        })
        for (var i = 0; i < nameList1.length; i++) {
            var height = $("#table2 table tbody tr:first-child td").eq(i).width();
            $("#table2 table thead tr:first-child th").eq(i).css({
                "width": height+0.8

            })
            var heightform=$(".searchContainer").height()-20;
            $(".formContent").css({
                "max-height":heightform*0.85,
                "overflow-y":"scroll"
            });
            if($(".formContent")[0].offsetHeight>(heightform*0.85)){
                $("#pageBar2").css("top",heightform*0.85+30)
            }else{
                $("#pageBar2").css("top",$(".formContent")[0].offsetHeight+80);
            }
        }
    });
</script>
</html>